<template>
	<view class="container">
		<!-- 登录 -->
		<view class="toubu">
			<view class="toubu-logo">
				<image src="/static/icon/logo.png" mode=""></image>
			</view>
			<view class="toubu-youbian">
				<view class="youbian-shu">
					<text>{{formatNumber(walletAddress)}}</text>
				</view>
				<view class="youbian-logo">
					<image src="/static/icon/touxian.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 矿列表 -->
		
			<view class="list">
				<!-- 矿机1 -->
				<view class="list-item" @click="godetail">
					<view class="listimg">
						<image class="listimg" src="/static/img/shequ.png" mode=""></image>
					</view>
					
					<view class="content">
					<text>{{$t('kuan.kuan1')}}</text>
				</view>
				</view>
				<!-- 矿机2 -->
				<view class="list-item" @click="licai">
					<view class="listimg">
						<image class="listimg" src="/static/img/licai.png" mode=""></image>
					</view>
					<view class="list-title">
						<text>{{$t('kuan.licai')}}</text>
						
					</view>
					<view class="content">
					<text>{{$t('kuan.kuan2')}}</text>
				</view>
				</view>
				<!-- 矿机3 -->
				<view class="list-item" @click="gojiner">
					<view class="listimg">
						<image class="listimg" src="/static/img/wakuan.png" mode=""></image>
					</view>
					<view class="list-title">
						<text>{{$t('kuan.guakuang')}}</text>
					</view>
					<view class="content">
					<text>{{$t('kuan.kuan3')}}</text>
				</view>
				</view>
			
			</view>
					<!-- 邀请码弹窗组件 -->
					<InviteCodeModal
						:visible="inviteModalVisible"
						:title="inviteModalConfig && inviteModalConfig.title || ''"
						:placeholder="inviteModalConfig && inviteModalConfig.placeholder || ''"
						:cancelText="inviteModalConfig && inviteModalConfig.cancelText || ''"
						:confirmText="inviteModalConfig && inviteModalConfig.confirmText || ''"
						@confirm="handleInviteModalConfirm"
						@cancel="handleInviteModalCancel"
					/>
		
	</view>
</template>

<script>
	import {
		Debounce
	} from "@/api/debounce.js"; //防抖
	import walletMixin from "@/mixins/walletMixin.js"; // 钱包混入
	import InviteCodeModal from "@/components/InviteCodeModal.vue"; // 邀请码弹窗组件

	export default {
		components: {
			InviteCodeModal
		},
		mixins: [walletMixin],
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		methods: {
			// 格式数字
			 formatNumber(number) {
			      // 处理 undefined 或 null 的情况
			      if (!number) return '';
			      // 将数字转化为字符串
			      const str = number.toString();
			      // 提取前四位和后四位，中间用省略号代替
			      const start = str.slice(0, 5);
			      const end = str.slice(-5);
			      return `${start}......${end}`;
			    },
				// 矿机详情
				godetail:Debounce(function(){
					this.$tab.navigateTo('/pages/kuan/detail')
				},1000),
				// 理财
				licai:Debounce(function(){
					this.$tab.navigateTo('/pages/kuan/licai')
				},1000),
				// 质押金额
				gojiner:Debounce(function(){
					this.$tab.navigateTo('/pages/kuan/zhiyawakuan')
				},1000),
			}
		
	}
</script>

<style>
	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	/* 头部登录 */
	.toubu{
		width: 94%;
		padding: 20rpx;
		margin-top: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.toubu-logo{
		width: 180rpx;
		height: 60rpx;
	}
	.toubu-youbian{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.youbian-shu{
		width: 220rpx;
		height: 50rpx;
		border-radius: 30rpx;
		background-color: #5e5e5e;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #ffffff;
		margin-right: 15rpx;
	}
	.youbian-logo{
		width: 60rpx;
		height: 60rpx;
		overflow: hidden;
		border-radius: 50%;
	}
	/* 列表 */
	.list{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.list-item{
		width: 690rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		background-color: #2d2d32;
		margin-bottom: 20rpx;
	}
	.listimg{
		width: 690rpx;
		height: 350rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
	.list-title{
		width: 94%;
		padding: 10rpx 20rpx 10rpx 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 25rpx;
		font-size: 32rpx;
	}
	.kuanji{
		width: 210rpx;
		height: 70rpx;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #4858b3;
		background-image: linear-gradient(to right, #a6c1ee 0%, #4858b3 100%);
	}
	.content{
		width: 96%;
		padding: 20rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}
	

</style>
